{% extends 'base.html' %}

{% block title %}
    登录
{% endblock %}

{% block content %}
	<!-- section main content -->
  <section class="main-content">
    <div class="container-xl">
      <div class="row">
        <div class="col-lg-6 mx-auto">
          <div class="post-content pt-2">
            <div class="card shadow-sm">
              <div class="card-body p-5">
                <h3 class="text-center mb-4">登录账号</h3>
                <form id="login-form" method="post">
                    {% csrf_token %}
                  <!-- 邮箱输入框 -->
                  <div class="form-group mb-4">
                    <label for="email" class="form-label">电子邮箱</label>
                    <input type="email" class="form-control form-control-lg" id="email" name="email" placeholder="请输入您的邮箱">
                  </div>

                  <!-- 密码输入框 -->
                  <div class="form-group mb-4">
                    <label for="password" class="form-label">密码</label>
                    <input type="password" class="form-control form-control-lg" id="password" name="password" placeholder="请输入您的密码">
                  </div>

                  <!-- 记住我和忘记密码 -->
                  <div class="d-flex justify-content-between mb-4">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="remember">
                      <label class="form-check-label" for="remember">记住我</label>
                    </div>
                    <a href="#" class="text-decoration-none">忘记密码？</a>
                  </div>
                    {% if error_msg %}
                        <span style="color: red">{{ error_msg }}</span>
                    {% endif %}
                  <!-- 登录按钮 -->
                  <div class="form-group text-center">
                    <input type="submit" class="btn btn-primary btn-lg w-100" value="登录">
                  </div>

                  <!-- 注册链接 -->
                  <div class="text-center mt-4">
                    <p class="mb-0">还没有账号？ <a href="/user/register/" class="text-decoration-none">立即注册</a></p>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
{% endblock %}



{% block js %}
{#	<script src="js/bootstrap.bundle.min.js"></script>#}
    <script>
      // 用户菜单切换功能：点击触发元素显示或隐藏用户菜单
      function toggleUserMenu(event) {
        event.stopPropagation(); // 阻止事件冒泡以避免与全局点击监听冲突
        const menu = document.getElementById('userMenu');
        // 切换菜单的显示状态，'none'表示隐藏，'block'表示显示
        menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
      }

      // 全局点击监听器：当点击不在菜单或汉堡按钮内时关闭用户菜单
      document.addEventListener('click', function(event) {
        const menu = document.getElementById('userMenu');
        const burgerButton = document.querySelector('.burger-menu');
        // 如果点击的目标既不在菜单内也不在汉堡按钮内，则隐藏菜单
        if (!menu.contains(event.target) && !burgerButton.contains(event.target)) {
          menu.style.display = 'none';
        }
      });

      // 搜索框切换功能：控制搜索框展开和收起
      function toggleSearchBox(event) {
        event.stopPropagation();
        const searchContainer = document.querySelector('.search-container');
        // 切换'search-container'的'active'类以控制样式变化
        searchContainer.classList.toggle('active');
        // 如果激活了搜索框，延迟100ms后自动聚焦输入框
        if (searchContainer.classList.contains('active')) {
          setTimeout(() => {
            const input = searchContainer.querySelector('.form-control');
            if(input) input.focus();
          }, 100);
        }
      }

      // 全局点击监听器：当点击不在搜索容器内时关闭搜索框
      document.addEventListener('click', function(event) {
        const searchContainer = document.querySelector('.search-container');
        // 如果点击的目标不在搜索容器内，则移除'active'类以关闭搜索框
        if (!searchContainer.contains(event.target)) {
          searchContainer.classList.remove('active');
        }
      });
    </script>
{% endblock %}



